<template>
  <ul class="draggable-container" :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7' : ''">
    <el-scrollbar style="height:100%" class="hid-scrollbar-x">
      <draggable
        :list="activePageForm.modules"
        :options="{group:'modules',put:true, sort: pageMode==='module'}"
        class="draggable-content"
        @start="start"
        @end="end"
        :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7' : ''"
      >
        <li
          v-for="(item,index) in activePageForm.modules"
          :key="index"
          class="draggable-cell"
          :class="index===activePageForm.activeModuleIndex&&pageMode==='module'?'draggable-cell-active':''"
          @click="chooseModule(index)"
          :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7;border-color:#f7f7f7' : ''"
        >
        <Pingmianlunbo v-if="item.type === 'pingmianlunbo' || item.key === 'pingmianlunbo'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Cengdielunbo v-if="item.type === 'cengdielunbo' || item.key === 'cengdielunbo'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Mofangdaohang v-if="item.type === 'mofangdaohang' || item.key === 'mofangdaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Kapiandaohang v-if="item.type === 'kapiandaohang' || item.key === 'kapiandaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Biaoqiandaohang v-if="item.type === 'biaoqiandaohang' || item.key === 'biaoqiandaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Liebiaochuchuang v-if="item.type === 'liebiaochuchuang' || item.key === 'liebiaochuchuang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Gundongchuchuang v-if="item.type === 'gundongchuchuang' || item.key === 'gundongchuchuang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Shangpinzhuanlan v-if="item.type === 'shangpinzhuanlan' || item.key === 'shangpinzhuanlan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Huiyuankaika v-if="item.type === 'huiyuankaika' || item.key === 'huiyuankaika'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Chongzhi v-if="item.type === 'chongzhi' || item.key === 'chongzhi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Chongzhijiangli v-if="item.type === 'chongzhijiangli' || item.key === 'chongzhijiangli'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Yingxiaohuodong v-if="item.type === 'yingxiaohuodong' || item.key === 'yingxiaohuodong'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Lingquan v-if="item.type === 'lingquan' || item.key === 'lingquan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Lingquanzhuanlan v-if="item.type === 'lingquanzhuanlan' || item.key === 'lingquanzhuanlan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Tupian v-if="item.type === 'tupian' || item.key === 'tupian'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Anniu v-if="item.type === 'anniu' || item.key === 'anniu'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Qianzhianniu v-if="item.type === 'qianzhianniu' || item.key === 'qianzhianniu'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Wenbenduan v-if="item.type === 'wenbenduan' || item.key === 'wenbenduan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Kezhankaishuoming v-if="item.type === 'kezhankaishuoming' || item.key === 'kezhankaishuoming'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Sousuolan v-if="item.type === 'sousuolan' || item.key === 'sousuolan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Shangpinfenlei v-if="item.type === 'shangpinfenlei' || item.key === 'shangpinfenlei'" :module.sync="activePageForm.modules[index]" :fileBaseUrl="fileBaseUrl" />
        <Dianpujianjie v-if="item.type === 'dianpujianjie' || item.key === 'dianpujianjie'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Guanzhugongzhonghao v-if="item.type === 'guanzhugongzhonghao' || item.key === 'guanzhugongzhonghao'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Gerenxinxi v-if="item.type === 'gerenxinxi' || item.key === 'gerenxinxi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Kaikaquanyi v-if="item.type === 'kaikaquanyi' || item.key === 'kaikaquanyi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <Changyonggongneng v-if="item.type === 'changyonggongneng' || item.key === 'changyonggongneng'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
        <ScrollAffiche v-if="item.type === 'gundonggonggao' || item.key === 'gundonggonggao'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl"  />
        </li>
      </draggable>
    </el-scrollbar>
  </ul>
</template>

<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import modules from './modules/modules'
export default {
  components: {
    draggable,
    ...modules
  },
  props: {
    pageMode: {
      type: String,
      default: null
    },
    activePageInfoType: {
     type: String
    }
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      startIndex: null,
      endIndex: null
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['activePageForm', 'fileBaseUrl'])
  },
  mounted() {
    console.log(this.pageMode)
  },
  methods: {
    /**
       * 数据组
       */

    /**
       * 按钮组
       */
    // 选择模块
    chooseModule(index) {
      setTimeout(() => {this.activePageForm.activeModuleIndex = index})
      this.activePageForm.activeModuleIndex = null

    },

    // 开始
    start(e) {
      // console.log(e);
    },

    // 拖拽结束
    end(e) {
      // 更新激活的activeModuleIndex
      if (e.newIndex === e.oldIndex) return
      if (e.oldIndex === this.activePageForm.activeModuleIndex) {
        this.activePageForm.activeModuleIndex = e.newIndex
      } else if (
        e.oldIndex < this.activePageForm.activeModuleIndex &&
          this.activePageForm.activeModuleIndex <= e.newIndex
      ) {
        this.activePageForm.activeModuleIndex -= 1
      } else {
        this.activePageForm.activeModuleIndex += 1
      }
    }
    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .draggable-container {
    background: #fff;
    height: 657px;
    overflow: auto;
  }

  /* 拖拽内容 */
  .draggable-content {
    height: 657px;
    padding: 0 5px;
    .p-module {
      width: 100%;
      height: auto;
    }
    li {
      cursor: pointer;
      // transition: all 0.38s;
    }
    .draggable-cell {
      cursor: pointer;
      border: 3px solid #fff;
    }
    .draggable-cell-active {
      border: 3px solid #409eff;
      border-radius: 10px;
    }
    .draggable-cell.sortable-chosen {
      background: #ecf5ff;
    }

    /* 选择之前 */
    ::v-deep .draggable-cell-prev {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80px;
      font-size: 14px;
      .i-module {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
      }
    }
  }
</style>
